<template>
  <el-table-column
    :label="column.label"
    :align="column.align || 'center'"
    v-if="column.children && column.children.length"
  >
    <my-el-table-column
      v-for="(subColumn,i) in column.children"
      :column="subColumn"
      :key="subColumn.prop+i"
    />
  </el-table-column>


  <el-table-column
    v-else-if="column.type === 'img'"
    :key="column.prop"
    :label="column.label"
    :prop="column.prop"
    :width="column.width"
    :align="column.align || 'center'"
    :fixed="column.fixed"
  >
    <template #default="scope">
      <el-image
        v-if="scope.row[column.prop]"
        style="width: 100px; height: 100px"
        :src="scope.row[column.prop]"
        :preview-src-list="[scope.row[column.prop]]"
        fit="cover"
      >
      </el-image>
     <span v-else>暂无图片</span>
    </template>
  </el-table-column>

  <el-table-column
      v-else-if="column.type === 'html'"
      align="center"
      :show-overflow-tooltip="true"
      v-bind="column"
    >
      <template #default="scope">
        <div v-html="column.formatter(scope.row)"></div>
      </template>
    </el-table-column>


  <el-table-column
    v-else-if="column.prop==='operation'"
    fixed="right"
    label="操作"
    :align="column.align || 'center'"
    :width="column.width">
    <template #default="scope">
      <el-button :class="slot.renderClass?slot.renderClass(scope):null" v-for="(slot,i) in column.slots" :type="slot.type" :key="i" @click="slot.renderClass?(slot.renderClass(scope)==='z-disabled'?null:slot.fn(scope)):slot.fn(scope)">
        {{slot.name}}
      </el-button>
    </template>
  </el-table-column>

  <el-table-column
    v-else
    :key="column.prop"
    :label="column.label"
    :width="column.width"
    :fixed="column.fixed"
    :align="column.align || 'center'"
    :show-overflow-tooltip="true"
    :formatter="column.formatter"
  >
        <template #default="scope" v-if="!column.formatter">
        <span v-html="scope.row[column.prop]"></span>
      </template>
  </el-table-column>

</template>

<script>
export default {
    'props':{
        'column':{
            'type':Object,
            'default':()=>{}
        }
    }
};
</script>

<style scoped>

</style>
